<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 边框属性border-width border-color border-style border-radius 可以四个方向分别设置或者整体设置 、块级元素和行内元素的转换-->

    <!-- 在 CSS 中, HTML 的标签的显示模式有很多，主要有：块级元素 和 行内元素/内联元素-->
    <!-- 块级元素：h1-h6，p，div，ul，ol，li等，
    特点：独占一行
        高度, 宽度, 内外边距, 行高都可以控制. 
        宽度默认是父级元素宽度的 100% (和父元素一样宽)
        是一个容器(盒子), 里面可以放行内和块级元素-->
    <!-- 文字类的元素内不能使用块级元素，p标签主要用于存放文字, 内部不能放块级元素, 尤其是 div -->

    <!-- 行内元素：
    不独占一行, 一行可以显示多个
    设置高度, 宽度, 行高无效
    左右外边距有效(上下无效). 内边距有效. 
    默认宽度就是本身的内容
    行内元素只能容纳文本和其他行内元素, 不能放块级元素 -->
    <!-- a 标签里可以放块级元素, 但是更建议先把 a 转换成块级元素 -->

    <!-- 块级元素和行内元素的区别
    块级元素独占一行, 行内元素不独占一行
    块级元素可以设置宽高, 行内元素不能设置宽高. 
    块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置 -->


    <!-- 使用 display 属性可以修改元素的显示模式，可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素-->
    <!-- display: block 改成块级元素 [常用]
    display: inline 改成行内元素 [很少用]
    display: inline-block 改成行内块元素 -->

    <style>
        /* 通过 border-radius 使边框带圆角效果 */
        /* border-radius: length; length是内切圆的半径. 数值越大, 弧线越强烈 */
        .one {
            width: 200px;
            height: 100px;
            /* 粗细: border-width
            样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
            颜色: border-color */
            /* border-top/bottom/left/right可以四个方向分别设置 */
            border: 2px solid green;
            /*这是一种简写*/

            /* 第一种写法：四个角同时设置 */
            border-radius: 15px;

            /* 第二种写法：每个角单独设置 */
            /* border-top-left-radius: 2em;
            border-top-right-radius: 2em;
            border-bottom-right-radius: 2em;
            border-bottom-left-radius: 2em; */

            /*第三种写法： 顺时针每个角设置*/
            /* border-radius: 10px 20px 30px 40px; */

            text-align: center;
        }



        /* 盒模型
        每一个 HTML 元素就相当于是一个矩形的 "盒子"，这个盒子由这几个部分构成
        边框 border
        内容 content
        内边距 padding
        外边距 margin */
        /* 边框 内边距 都会会撑大盒子 */
        /* 通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子 */
        .two {
            width: 200px;
            height: 100px;
            border: 1px blue solid;
            box-sizing: border-box;
            /* 此设置可以不撑大盒子 */

            /* padding 设置内容和边框之间的距离. */
            /* 默认内容是顶着边框来放置的. 用 padding 来控制这个距离
            可以给四个方向都加上边距
            padding-top
            padding-bottom
            padding-left
            padding-right */
            /* 四种常见写法 */
            /* padding: 5px; 表示四个方向都是 5px
            padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
            padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
            padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针) */
            padding: 5px;


            /* 控制盒子和盒子之间的距离. 
            可以给四个方向都加上边距
            margin-top
            margin-bottom
            margin-left
            margin-right */
            /* 下面写法规则同padding */
            /* margin: 10px; // 四个方向都设置
            margin: 10px 20px; // 上下为 10, 左右 20
            margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
            margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40 */
            /* margin: 10px; */
        }

        div {
            /* 块级元素水平居中的方式 */
            /* 指定宽度(如果不指定宽度, 默认和父元素一致) */
            /* 把水平 margin 设为 auto */
            /* 注意:如果标签设置了margin,那么居中的margin:auto可能就不会生效 */
            /* 注意:另外, 对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式 */
            width: 200px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
        }

        * {
            /* 浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别. 
            为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式 */
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div class="border one">你好</div>
    <div class="border two">你好</div>
</body>

</html>